<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>签到管理员后台</title>
    <base href="/qiandao/admin">
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="../lib/jquery/dist/jquery.min.js"></script>
    <script src="../lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../lib/moment/moment-with-locales.min.js"></script>
    <style type="text/css">
        body {
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>签到记录</h2>
    <div class="time-range" style="margin-top: 20px;">
        <span>请选择时间段</span>
        <input name="from" type="datetime-local"/>
        <span>到</span>
        <input name="to" type="datetime-local"/>
    </div>
    <table class="table table-responsive"
           style="margin-top:20px;border-top: #999999 2px solid;border-bottom: #999999 2px solid ;max-width: 90%;">
        <thead>
        <th>用户名</th>
        <th>昵称</th>
        <th>签到次数</th>
        </thead>
        <tbody id="table-body">

        </tbody>
    </table>
    <div style="margin-top: 15px">
        <button type="button" onclick="toFirst()"><<</button>
        <button type="button" onclick="toLast()"> 上一页</button>
        <button type="button" onclick="toNext()">下一页</button>
        <button type="button" onclick="toFinal()">>></button>
        <span style="margin-left: 15px">跳至</span><input name="jumpto" type="number" min="1" onkeypress="jumpto(event)"/><span>页</span>
        <button type="button" onclick="jumpto(event)">确定</button>
        <span style="margin-left: 15px">当前第<label name="showPage"></label>页</span>
    </div>
</div>
<script type="text/javascript">

    function renderTable(query) {
        fetch("/qiandao/admin/getPagedRecord", {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            method: "POST",
            body: JSON.stringify(query)
        }).then(function (response) {
            if (!response.ok) {
                alert(response.status + ": 服务器错误，请刷新重试！")
            } else {
                response.json().then(function (res) {
                    console.log("res", res);
                    result = res;
                    var html = res.content.map(function (item) {
                        var nickname = item.userInfo ? JSON.parse(item.userInfo).nickname : "";
                        return "<tr>" +
                                "<td>" + item.userId + "</td>" +
                                "<td>" + nickname + "</td>" +
                                "<td>" + item.totalCheckInNum + "</td>" +
                                "</tr>"
                    });
//                    console.log("html", html);
//                    console.log("json", JSON.parse(res.content[1].userInfo).nickname);
                    $("#table-body").html(html);
                    console.log("input", $("input[name=jumpto]")[0]);
                    $("input[name=jumpto]").attr("max", res.totalPages);
                    $("label[name=showPage]").html(res.number + 1 + "/" + res.totalPages);
                });
            }
        })
    }

    function toFirst() {
        page = 0;
        renderTable({page: page, size: size, from: moment(from).toDate(), to: moment(to).toDate()})
    }

    function toFinal() {
        page = result.totalPages - 1;
        renderTable({page: page, size: size, from: moment(from).toDate(), to: moment(to).toDate()})
    }

    function toLast() {
        page = page > 0 ? page - 1 : 0;
        renderTable({
            page: page,
            size: size,
            from: moment(from).toDate(),
            to: moment(to).toDate()
        })
    }

    function toNext() {
        page = page < result.totalPages - 1 ? page + 1 : page;
        renderTable({
            page: page,
            size: size,
            from: moment(from).toDate(),
            to: moment(to).toDate()
        })
    }

    function jumpto(event) {
//        console.log("event", event);
        if (event.type === "click") {
            var currentPage = $("input[name=jumpto]")[0].value - 1
            renderTable({
                page: currentPage,
                size: size,
                from: moment(from).toDate(),
                to: moment(to).toDate()
            })
        } else if (event.keyCode === 13) {
            renderTable({
                page: event.target.value - 1,
                size: size,
                from: moment(from).toDate(),
                to: moment(to).toDate()
            })
        }
    }

    var page = 0, size = 10;
    var from = moment().startOf("month").format("YYYY-MM-DDTHH:mm");
    var to = moment().endOf("month").format("YYYY-MM-DDTHH:mm");
    var fromEle = document.getElementsByName("from")[0];
    var toEle = document.getElementsByName("to")[0];
    fromEle.setAttribute("value", from);
    toEle.setAttribute("value", to);
    var query = {page: page, size: size, from: moment(from).toDate(), to: moment(to).toDate()};
    var result = {};
    renderTable(query)
</script>
</body>
</html>